<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="../../CSS/layerPopup.css">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .contain {
            width: 85%;
            background: #fff;
            box-sizing: border-box;
            padding: 25px 15px;
            box-shadow: 3px 6px 11px 0 #d4d4d4;
            overflow: hidden;
            margin: 0 auto;
        }
        .layui-layer-setwin a:hover {
            background-color: none !important;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #00aeff !important;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em{
            background-color: #1E9FFF !important;
        }
        .layui-table-page{
            text-align: right;
        }
        .layui-laypage-prev i:hover,
        .layui-laypage-next i:hover{
            color: #1E9FFF !important;
        }
    </style>
</head>

<body>
    <div class="contain">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-normal" lay-event="increase">新增标签</button>
        </div>
      </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
<!-- 修改用户弹窗 -->
  <div id="correctpupop" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 8px;box-sizing: border-box;padding-right: 15px;">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" id="name" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <select id="status" name="status" lay-filter="status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
          <textarea id="info" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn layui-btn-normal updateUser" lay-submit="" lay-filter="update">更新</button>
        </div>
      </div>
    </form>
  </div>
  <!-- 存放修改的id -->
  <input id="saveId" type="hidden" >
</body>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="titleTpl">
    {{#  if(d.status == 1){ }}
    <span class="layui-badge-rim layui-bg-green">启用</span>
    {{#  } else { }}
    <span class="layui-badge-rim layui-badge">禁用</span>
    {{#  } }}
</script>
<script>
    var element, form, table;
    var cIndex = null;
    var eIndex = null;

    layui.use(['element', 'form','layer','table'], function () {
        element = layui.element;
        form = layui.form;
        table = layui.table;
        layer = layui.layer;

        table.render({
            elem: '#test'
            ,method:'post'
            , url: parent.defaultUrl+'/tag/selTag'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: []
            ,contentType:'application/json'
            , title: '标签管理表'
            // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [ 'prev', 'page', 'next', 'skip','limit', 'count',] //自定义分页布局
                ,limit:10 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页
                }
                ,where:{
                    "ispage": true
                }
            ,parseData: function(res){
                return {
                    'code': 0, //解析接口状态
                    'msg': '', //解析提示文本
                    'count': res.totle, //解析数据长度
                    'data': res.data //解析数据列表
                };
            }
            , cols: [[
                { field:'id', title: 'ID', align: 'center', sort: true, width: 100}
                , { field: 'name', title: '用户名', align: 'center', width: 120 }
                , { field: 'info', title: '内容', align: 'center' }
                , { field: 'status', title: '状态', align: 'center', width: 80,templet:'#titleTpl' }
                , { title: '操作', toolbar: '#barDemo', align: 'center', width: 150}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'increase':
                cIndex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['新增标签', 'font-size:18px;color:#fff;'],
                    content:$("#correctpupop"),
                    area: ['480px', '350px'],
                })
                $('#name').val('');
                $('#info').val('');
                $("#status").val('0');
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // /tag/delTagById
                    parent.ajaxGet( parent.defaultUrl+'/tag/delTagById',{id:data.id},function (res) { 
                        if(res.code == 200){
                            layer.msg('标签删除成功')
                            obj.del();
                        }
                     })
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                console.log(data)
                $('#name').val(data.name);
                $('#info').val(data.info);
                $('#saveId').val(data.id);
                $('#status').val(data.status)
                form.render('select');
                cIndex = layer.open({
                    type:1,
                    skin: 'layerCls',
                    title: ['修改标签', 'font-size:18px;color:#fff;'],
                    content:$("#correctpupop"),
                    area: ['480px', '350px'],
                })

            }
        });
    });

$('.updateUser').click(function () { 
    // 判断是新增还是修改
    var text = $('.layui-layer-title').text();
    var name =  $('#name').val();
    var info =  $('#info').val();
    var status = $("#status").val();
    if(text == '新增标签'){
        parent.ajaxPost(parent.defaultUrl+'/tag/insertTag',{info: info,name: name,status: status},function (res) { 
                if(res.code == 200){
                    layer.msg('新增标签成功')
                    reload()
                }
             }
        )
    }else{
        var id = $('#saveId').val()
        parent.ajaxPost(parent.defaultUrl+'/tag/updateTag',{id: id,info: info,name: name,status: status},function (res) { 
            if(res.code == 200){
                layer.msg('修改标签成功')
                reload()
            }
        })
    }
    layer.close(cIndex);
    return false;
 })

// 表格重载
function reload(){
    table.reload('test', {
        url: parent.defaultUrl+'/tag/selTag'
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: [ 'prev', 'page', 'next', 'skip','limit', 'count',] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,limit:10 //一页显示多少条
            ,limits:[5,10,15]//每页条数的选择项
            // ,groups: 2 //只显示 2 个连续页码
            ,first: "首页" //不显示首页
            ,last: "尾页" //不显示尾页
        }
      });
}
</script>

</html>